<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .hello {
      background-color: aqua;
    }
    .text-danger {
      color: #f00;
      font-size: 30px;
    }
  </style>
</head>
<body>


<div id="app">
  <!--<div
    class="hello"
    v-bind:class="{ active: isActive, 'text-danger': hasError }"
  >{{ msg }}</div>-->

  <!--<div
    class="hello"
    v-bind:class="classObj"
  >{{ msg }}</div>-->
  <!--<div
    class="hello"
    :class="isShow ? 'show' : ''"
  >{{ msg }}</div>-->
  <!--<div
    class="hello"
    :class="`${isShow ? 'show' : ''}`"
  >{{ msg }}</div>-->
<!--  <h1 style="font-size: 100px; color: red">{{ msg }}</h1>-->
<!--  <h1 :style="{ 'font-size': '100px', color: 'red' }">{{ msg }}</h1>-->
<!--  <h1 :style="{ 'font-size':  size + 'px', color: red }">{{ msg }}</h1>-->
<!--  <h1 :style="styleObj">{{ msg }}</h1>-->
<!--  <h1 :style="[styleObj1, styleObj]">{{ msg }}</h1>-->
<!--  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>-->
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      styleObj: {
        color: 'red',
        backgroundColor: 'blue',
        transition: '.5s'
      },
      styleObj1: {
        fontSize: '80px',
        backgroundColor: 'yellow',
      },
      size: 20,
      red: '#f00',
      // isActive: true,
      // hasError: false,
      classObj: {
        active: false,
        'text-danger': true,
      },
      msg: 'hello vue',
      list: ['a', '123', 'apple'],
      isShow: false,
      isDisabled: false,
    },

  })

</script>

</body>
</html>
